<template>
    <div class="userOrder">
        <header class="userOrder-header">
            <router-view></router-view>
            <router-link to="/user" tag="i">
            </router-link>
            <span>我的订单</span>
        </header>
        <nav class="userOrder-nav">
            <h3 :class="{'classActive':type=='all'}" @click="all"> 全部</h3>
            <h3 :class="{'classActive':type=='pay'}" @click="paying"> 待付款</h3>
            <h3 :class="{'classActive':type=='send'}" @click="sending"> 待发货</h3>
            <h3 :class="{'classActive':type=='receive'}" @click="receiving"> 待收货</h3>
            <h3 :class="{'classActive':type=='comment'}" @click="commenting"> 待评价</h3>
        </nav>
        <div class="items" :class="{'items1':receiveDetail.length==0}" v-if="type=='all'||type=='pay'">
            <div v-for="(data,index) in receiveDetail" :key="index" class="payItems">
                <div class="time">{{data.time}}</div>
                <img :src="d.pic" v-for="(d,index) in data.products" :key="index" 
                class="pic" v-if="index<4">
                <div class="div1">
                    <div class="div2">
                        <p class="p1">总金额&nbsp;&nbsp;:&nbsp;&nbsp;<span class="span1">{{data.sumPrice}}</span></p>
                        <p class="p2">主人,请您在24小时内支完成付~</p>
                    </div>
                    <button class="button1">立即付款</button>
                </div>
                <span class="span2"></span>
            </div>
        </div>
        <div class="items" :class="{'items1':receiveDetail.length==0}" v-if="type=='send'"></div>
        <div class="items" :class="{'items1':receiveDetail.length==0}" v-if="type=='receive'"></div>
        <div class="items" :class="{'items1':receiveDetail.length==0}" v-if="type=='comment'"></div>

    </div>
</template>

<script>
export default {
    data: function () {
        return {
            type: "all",
        }
    },
    methods: {
        all() {
            this.type = "all";
        },
        paying() {
            this.type = "pay";
        },
        sending() {
            this.type = "send";
        },
        receiving() {
            this.type = "receive";
        },
        commenting() {
            this.type = "comment";
        }
    },
    mounted: function () {
        this.type = this.$route.query.type
    },
    computed: {
        receiveDetail() {
            console.log("--------",this.$store.state.buyList);
            return this.$store.state.buyList;
        }
    }
}
</script>

<style>
@import "../../static/css/base.css";
.classActive {
    color: yellowgreen;
    padding-bottom: .2rem;
    border-bottom: 2px solid yellowgreen;
}
.userOrder {
    width: 100%;
    height: 100vh;
    font-size: .15rem;
    position:relative;
    z-index: 33;
}
.userOrder-header {
    width: 100%;
    height: 0.65rem;
    font-size: .25rem;
    display: flex;
    align-items: center;
}

.userOrder-header i {
    width: .5rem;
    height: .7rem;
    background: url(../../static/img5/icon-arrow1.png) no-repeat .15rem center;
    background-size: 50%;
}

.userOrder-header span {
    padding-left: 32%;
}

.userOrder-nav {
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: .19rem 0;
}

.items {
    background-color: rgb(248, 248, 248);
    width: 100%;
    height: 100vh;
    
}
.items1{
    background: url(../../static/img5/empty-bg.png) no-repeat center 1rem;
    background-color: rgb(248, 248, 248);    
    background-size: 48%;
    
}
.payItems{
    padding: 0 .2rem;
    background:white;  
    font-size:.2rem;  
    position:relative;
}
.time{
    width:100%;
    height:.6rem;
    display: flex;
    align-items: center;
    background:white;
    text-align: center;
    border-top:5px solid rgb(248, 248, 248);
    border-bottom:3px solid rgb(248, 248, 248);
}
.span1{
    color:red;
}
.p2{
    color:red;
}
.pic{
    width: 1.2rem;
    height: 1.2rem;
}
.div1{
    display: flex;
    justify-content: space-between;
}
.button1{
    outline: none;
    background:red;
    color: white;
    border: none;
    padding: .1rem .15rem;
    font-size: .2rem;
    border-radius: 5px;
}
.span2{
    position:absolute;
    background: url(../../static/img5/icon-arrow.png) no-repeat center center;
    background-size: 48%;    
    width: .5rem;
    height: .7rem;
    right:0;
    bottom:.8rem;
}
</style>